<template>
    <template v-for="(item) in menuList" :key="item.path" class="el-menu-demo">
        <!-- 没有子路由 -->
        <template v-if="!item.children || item.children.length === 0">
            <el-menu-item :index="item.path" v-if="!item.meta.hidden" @click="goRouter">
                <!-- icon写在标题插槽里面,折叠(collapse)会导致图标丢失 -->
                <el-icon>
                    <Component :is="item.meta.icon || defaultIcon" />
                </el-icon>
                <template #title>
                    <span>{{ item.meta.title }}</span>
                </template>
            </el-menu-item>
        </template>
        <template v-else>
            <el-sub-menu :index="item.path" v-if="!item.meta.hidden">
                <template #title>
                    <el-icon>
                        <Component :is="item.meta.icon || defaultIcon" />
                    </el-icon>
                    <span>{{ item.meta.title }}</span>
                </template>

                <Menu :menuList="item.children"></Menu>
            </el-sub-menu>


        </template>
    </template>
</template>

<script setup lang='ts' name='Menu'>
import { useRouter } from 'vue-router';

// 获取父组件传递u过来的全部路由数值
defineProps([
    'menuList'
])

const defaultIcon = 'Document'

// 获取路由器对象
const $router = useRouter();

// 点击菜单项跳转路由
const goRouter = (vc: any) => {
    // 路由跳转
    $router.push(vc.index);
}

</script>

<style scoped></style>